<!--
 * @Description: 
 * @Author: HC
 * @Email: 2472911753@qq.com
-->
<template>
  <div id="app">
    <div class="group_heads" v-show="!down">
      <span>{{ title }}</span>
    </div>
    <router-view />
  </div>
</template>

<script>
export default {
  computed: {
    title() {
      const name = this.$route.query.name;
      return this.$route.name == "preview"
        ? `${name}答题卡预览`
        : `${name}答题卡`;
    },

    down() {
      return this.$route.query.down
        ? 1
        : this.$route.name != "/" &&
          this.$route.name != "Home" &&
          this.$route.name != "preview"
        ? 1
        : 0;
    },
  },
};
</script>

<style lang="less">
@import "~@/assets/css/variables.less";

#app {
  height: 100%;
}

.group_heads {
  height: 50px;
  line-height: 50px;
  width: 100%;
  background-color: @main;
  position: sticky;
  z-index: 10;
  text-align: center;
  color: @white;
  font-size: 16px;
  top: 0;
}

.miniScoreHeight {
  display: flex;
  flex-direction: row-reverse;
  border-bottom: 1px solid #000;

  .item {
    height: 24px;
    flex: 1;
    text-align: center;
    box-sizing: border-box;
    // border-top: 1px solid #000;
    border-left: 1px solid #000;
    font-size: 12px;
    line-height: 24px;

    &:first-child {
      // border-right: 1px solid #000;
    }

    &:last-child {
      border-left-width: 0;
    }
  }
}

.mce-content-body {
  border: none !important;

  &.mce-edit-focus {
    outline: none;
    border: none !important;
    box-shadow: none;
  }
}

.question-title {
  .el-input--medium {
    font-size: 16px !important;

    .el-input__inner,
    .el-textarea__inner {
      font-size: 16px;
      color: #000;
      padding-left: 3px !important;
      border-radius: 0;
      border-style: solid !important;
      text-align: left;
      min-height: 30px !important;
      height: 30px;
    }
  }

  div {
    line-height: 28px;
  }
}

.hand-read-bar {
  height: 30px;
  display: flex;
  align-items: center;
  padding-right: 4px;
}

.hand-read-bar .item {
  width: 29.2px !important;
  font-family: simsun;
  font-size: 12px !important;
  display: block !important;
  line-height: 19px;
  text-align: center;
  border-left: 0.1pt solid #000 !important;
  border-top: 0.00001px solid #000 !important;
  border-bottom: 0.00001px solid #000 !important;
  &:first-child {
    border-right: 0.00001px solid #000 !important;
  }
}

.hand-read-bar-cus .item {
  width: 29.2px !important;
  font-family: simsun;
  line-height: 19px;
  display: block !important;
  font-size: 12px !important;
  text-align: center;

  border-left: 0.00001px solid #000 !important;
  border-top: 0.00001px solid #000 !important;
  border-bottom: 0.00001px solid #000 !important;
  text-align: center;

  // &:first-child {
  //   border-right: 0.00001px solid #000 !important;
  // }
}

.hand-read-bar .right-border {
  border-left: 0.00001px solid #000 !important;
  height: 20px;
}

.question-title {
  font-weight: bold;
}

.page_info_itme {
  border: none !important;
}
</style>
